{% extends "base.html" %}
<style type="text/css">
    ul.errorlist {
        margin: 0;
        padding: 0;
    }
    .errorlist li {
        background-color: red;
        color: white; 
        display: block;
        font-size: 10px;
        margin: 0 0 3px;
        padding: 4px 5px;
    }
</style>
{% block body %}
    <!-- <img class="img-font" title="AutoCartel" alt="AutoCartel" src="/static/client/img/reg.png" data-id="8022"></img>    -->    
    <form action="/registration/" method="post">{% csrf_token %}        
        <div class="span5">
            <p style="color: red">
            {% for error in form.non_field_errors %}
                {{error}}
            {% endfor %}
        </p>
            <p class="text-success"> 
                <b>Уважаемые клиенты! Просим Вас внимательно заполнять информацию о себе, во  избежание проблем при получении груза на транспортных компаниях Украины.</b>
            </p>
            <p>
                {{ form.name.errors }}
                    <label for="id_name">Имя*</label>
                {{ form.name }}
            </p>
            <p>
                {{ form.surname.errors }}
                    <label for="id_surname">Фамилия*</label>
                {{ form.surname }}
            </p>
            <p>
                {{ form.patronymic.errors }}
                    <label for="id_patronymic">Отчество*</label>
                {{ form.patronymic}}
            </p>
            <p>
                {{ form.company.errors }}
                    <label for="id_company">Компания</label>
                {{ form.company }}
            </p>        
            <p>
                {{ form.regions.errors }}
                    <label for="id_regions">Регионы*</label>
                {{ form.regions }}
            </p>
            <p>
                <label for="id_city_id">Город*</label>
                <select name="city_id"></select>
            </p> 
        </div>
        <div class="span5">
            <div class="alert alert-danger">
              Поля с примечанием * являются обязательными к заполнению
            </div>
            <p>
                {{ form.email.errors }}
                    <label for="id_email">Email*</label>
                {{ form.email}}
            </p> 
            <p>
                {{ form.password.errors }}
                    <label for="id_password">Пароль*</label>
                {{ form.password }}
            </p>
            <p>
                {{ form.confirm_password.errors }}
                    <label for="id_confirm_password">Подтвердите пароль*</label>
                {{ form.confirm_password }}
            </p> 
            <p>
                <label class="checkbox">
                     <input type="checkbox"> Я согласен с условиями <a href="#">программы лояльности</a> компании <b>AutoCartel</b>*
                </label> 
            </p>       
            <input type="submit" class="btn btn-default" value="Зарегистрироваться" />        
        </div>
    </form>
    <script>
        $('#id_regions').on('change', function() {
            var region_id = $(this).find(':selected').val();            
            $.post('/region_city/', {region_id: region_id}, function(r) {
                var options = '';
                for (var i in r) {
                    obj = r[i];
                    options += '<option value=' + obj.pk + '>' + obj.fields.name + '</option>';
                }
                $('select[name="city_id"]').html(options);                
            })
        })    
    </script>
{% endblock %}